<template>
  <el-dialog
    :title="title"
    :visible="visible"
    width="800px"
    append-to-body
    @close="cancel"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="150px">
      <el-form-item label="核查指标" prop="targetName">
        <el-select v-model="form.targetName" :disabled="operationType === 'edit'" style="width: 240px">
          <el-option
            v-for="dict in targetOpts"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="核查要点" prop="keyName">
        <el-select v-model="form.keyName" :disabled="operationType === 'edit'" style="width: 240px">
          <el-option
            v-for="dict in keyOpts"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="核查内容" prop="content">
        <el-input v-model="form.content" type="textarea" placeholder="请输入核查内容" />
      </el-form-item>
      <el-form-item label="重要级别" prop="level">
        <el-select v-model="form.level" style="width: 240px">
          <el-option
            v-for="dict in dict.type.sys_dict_problem_level"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button v-loading="loading" type="primary" @click="submit">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'EnvDialog',
  dicts: ['sys_dict_problem_level'],
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    initData: {
      type: Object,
      default: () => undefined
    },
    targetOpts: {
      type: Array,
      default: () => []
    },
    keyOpts: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      loading: false,
      form: this.getInitFormData(),
      operationType: 'add',
      rules: {
        targetName: [
          { required: true, message: '核查指标不能为空', trigger: 'blur' }
        ],
        keyName: [
          { required: true, message: '核查要点不能为空', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '核查内容不能为空', trigger: 'blur' }
        ],
        level: [
          { required: true, message: '重要级别不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    getInitFormData() {
      let output = {}
      this.operationType = 'add'
      if (this.initData) {
        this.operationType = 'edit'
        output = { ...this.initData }
      }
      return output
    },
    cancel() {
      this.loading = false
      this.form = {}
      this.resetForm('form')
      this.$emit('cancel')
    },
    submit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loading = true
          const formData = {
            id: '',
            ...this.form
          }
          this.$emit('submit', formData)
        }
      })
    }
  }
}
</script>
